<template>
	<view class="page-container">
	  <view class="scan-main" v-if="deviceList.length == 0">
	    <view class="scan-icon">
	      <view class="scan-rotate" >
	        
	      </view>
	      <image class="ble-icon p-center" src="../../assets/svg/ble.svg"></image>
	    </view>
	    <view class="scan-text">扫描中...</view>
	    <view class="scan-note">
	      <view>1.请将手机尽量靠近已开机姐钥仪</view>
	      <view>2.请确认手机蓝牙处于开启状态</view>
	      <view>3.请确认姐钥仪已开机</view>
	    </view>
	  </view>
	  <view class="scan-list-container" v-else>
	    <view class="scan-head">
	      <view class="scan-rorate-2"></view>
	      <view>持续扫描中...</view>
	    </view>
	    <view style="font-size: 28rpx;color:#363636;margin: 30rpx 0;">
	      请选择需要连接的设备
	    </view>
	    <view class="device-list" >
	      <view class="device-item" v-for="(item, index) in deviceList" :key="index" @click="connectBLE(index)">
	        <image src="../../assets/svg/jkey.svg"></image>
	        <view class="device-name">
	          <view>姐钥仪</view>
	          <view class="bat-status" v-if="item.isConnect">100%</view>
	        </view>
	        <view class="connect-btn" >
	          {{['连接','连接中...','已连接'][item.status-1]}}
	        </view>
	      </view>
	      <view class="device-item" v-if="false">
	        <image src="../../assets/svg/jkey.svg"></image>
	        <view class="device-name">
	          <view>姐钥1号</view>
	        </view>
	        <view class="connect-btn">
	          连接
	        </view>
	      </view>
	    </view>
	  </view>
	</view>
</template>
<script>
import {searchBLEDevice,connectBLE} from '../../utils/bleController'
export default{
	data() {
		return {
			deviceList:[]
		}
	},
	onShow(){
		searchBLEDevice((deviceId)=>{
		  this.deviceList.push({
		    deviceId,
		    status:1,
		    isConnect:false,
		  })
		})
		
	},
	onHide(){
		wx.stopBluetoothDevicesDiscovery()
	},
	methods:{
		connectBLE(index){
		  if(!this.deviceList.some((x,i)=>{
		    if(i == index){
		      return
		    }
		    if(x.status !== 1){
		      uni.showToast({
		        title: '有设备连接中/已连接',
		        icon:'none'
		      })
		      return true
		    }
		  }))
		  if(this.deviceList[index].status !== 1){
		    return uni.showToast({
		      title: `当前设备${['','连接中','已连接'][this.deviceList[index].status - 1]}`,
		      icon:'none'
		    })
		  }
		  // this['deviceList[' + index + ']'] = {
		  //     ...this.deviceList[index],
		  //     status:2,
		  //   }
		  this.deviceList[index] = {
			  ...this.deviceList[index],
			  status:2
		  }
		  connectBLE(this.deviceList[index].deviceId,(res)=>{
		    console.log(res)
		    // this['deviceList[' + index + ']'] = {
		    //     ...this.deviceList[index],
		    //     status:3,
		    //     serviceId:res
		    //   }
			  this.deviceList[index] = {
			  			  ...this.deviceList[index],
			  			  status:3,
			  			  serviceId:res
			  }
		    getApp().globalData.BLEInfo = {
		      ...this.deviceList[index],
		      status:3,
		      serviceId:res
		    }
		    console.log(this.deviceList)
		    uni.navigateBack({
		      success(){
		        uni.showToast({
		          title: '连接成功',
		          icon:'none'
		        })
		      }
		    })
		  })
		},
	}
}
</script>
<style lang="scss">
@import './index.css'
</style>